<template>
	<view class="content">
		<u-navbar title=" " bg-color="rgba(0,0,0,0)" @leftClick="leftClick"></u-navbar>
		<image class="bg" mode="widthFix" src="/static/bg1.png"></image>
		<view class="footer">
			<view class="box">
				<view class="box__subtitle">北京诚优佳装饰·让家装一站式解决</view>
				<view class="box__title">
					算算你家装修需要花多少钱
					<view class="bottom-bg"></view>
				</view>
				<view class="box__top flex">
					<view class="left"></view>
					<view class="">请选择您的户型</view>
					<view class="right"></view>
				</view>
				<view class="box__center flex">
					<view v-for="(item,index) in list" :key="index" :class="index == tab_index ? 'avtice' : ''"
						@click="clickTab(index)">
						{{item.name}}
					</view>
				</view>
				<view class="box__input flex">
					<input type="digit" v-model="value" placeholder-class="pclass" placeholder="请输入面积" />
					<text>平方</text>
				</view>
				<view class="box__btn" @click="toUrl">点击获取报价</view>
				<view class="box__tips">
					温馨提示：本报价包含：室内装修施工费,全屋定制家居。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_index: 0,
				list: [{
						id: 1,
						name: '三居室',
						p: 630
					},
					{
						id: 2,
						name: '四居室',
						p: 620
					},

					{
						id: 3,
						name: '复式',
						p: 580
					},
					{
						id: 4,
						name: '别墅',
						p: 580
					},

				],
				value: ''
			}
		},
		onLoad() {

		},
		methods: {
			clickTab(index) {
				this.tab_index = index
			},

			toUrl() {
				if (this.value == '' || this.value == 0 || this.value == undefined) {
					uni.$u.toast('请输入面积')
					return
				}

				if (this.value > 99999) {
					uni.$u.toast('请根据实际输入')
					return
				}
				let p = this.list[this.tab_index].p
				let m = Math.round(this.value * 100);
				let n = this.list[this.tab_index].name
				uni.navigateTo({
					url: '/pages/index/house_type?m2=' + m + '&p=' + p + '&n=' + n
				})
			},
			leftClick() {
				uni.redirectTo({
					url: '/pages/index/home'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		overflow: hidden;
	}

	.bg {
		width: 750rpx;
		z-index: -1;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer {
		background-color: #B3A284;
		height: 50vh;
		margin-top: -100rpx;
		padding-top: 90rpx;
		font-family: PingFang SC, PingFang SC;
		position: relative;

		.box {
			width: 570rpx;
			background-color: #FFF;
			padding: 40rpx 60rpx;
			margin: 0 auto;
			border-radius: 35rpx;
			margin-top: -230rpx;
			z-index: 2;
			position: absolute;
			left: 30rpx;

			left:30rpx &__subtitle {
				font-weight: 400;
				font-size: 38rpx;
				color: #FF6545;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			&__title {
				font-weight: 500;
				font-size: 48rpx;
				color: #000000;
				text-align: center;
				font-style: normal;
				text-transform: none;
				position: relative;
				margin-bottom: 50rpx;

				.bottom-bg {
					position: absolute;
					bottom: 4rpx;
					width: 100%;
					height: 16rpx;
					background: #FEFF04;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 0.2;
				}
			}

			&__top {
				font-weight: 400;
				font-size: 38rpx;
				color: #333333;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-bottom: 50rpx;

				.left {
					width: 134rpx;
					height: 0rpx;
					border: 2rpx solid;
					border-image: linear-gradient(90deg, rgba(51, 51, 51, 1), rgba(255, 255, 255, 1)) 2 2;
				}

				.right {
					width: 134rpx;
					height: 0rpx;
					border: 2rpx solid;
					border-image: linear-gradient(90deg, rgba(51, 51, 51, 1), rgba(255, 255, 255, 1)) 2 2;
				}
			}

			&__center {
				flex-flow: row wrap;
				// margin-bottom: 30rpx;

				view {
					width: 270rpx;
					height: 104rpx;
					background: #F6F6F6;
					border-radius: 7rpx 7rpx 7rpx 7rpx;
					border: 2rpx solid #EAEAEA;
					font-weight: 400;
					font-size: 30rpx;
					color: #666666;
					line-height: 104rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-bottom: 30rpx;
				}

				.avtice {
					color: #1990FF;
					border: 2rpx solid #1990FF;
				}
			}

			&__input {
				background: #F6F6F6;
				border: 2rpx solid #EAEAEA;
				color: #999999;
				padding: 30rpx 10rpx;
				border-radius: 4rpx;
				margin-bottom: 30rpx;

				.pclass {
					font-size: 14px;
					color: #999999;
				}
			}

			&__btn {
				height: 80rpx;
				background: linear-gradient(90deg, #1990FF 0%, #26ABFF 100%);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-bottom: 30rpx;
			}

			&__tips {
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>